<template>
  <el-upload
    :disabled="disabled"
    ref="uploadRef"
    :accept="acceptTypes"
    :headers="uploadHeaders"
    :on-remove="handleRemove"
    :file-list="defaultFileList"
    :on-preview="handlePreview"
    :on-change="changeFile"
    :auto-upload="false"
  >
    <el-button size="small" type="primary" v-if="!disabled">点击上传</el-button>
    <slot name="temp" v-if="!disabled"></slot>
    <template #tip v-if="!disabled">
      <div class="el-upload__tip">
        支持上传doc、docx、xls、xlsx、pdf、ppt、pptx、png、jpg、jpeg等格式文件,文件大小不得大于10M。
      </div>
    </template>
  </el-upload>
  <el-progress v-if="processLoadding" :percentage="loadProgress" />
</template>
<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import { useUpload } from "/@/hooks";
import { importFileForEcm } from "../../utils/ecm";
export default defineComponent({
  name: "ecmUpload",
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    files: {
      type: Array,
      default: () => []
    },
    docid: {
      type: String,
      default: ""
    }
  },
  emits: ["setFile"],
  setup(props, { emit }) {
    const uploadRef = ref(null);
    const loadProgress = ref(0);
    const defaultFileList = ref<any>([]);
    const processLoadding = ref(false);
    const {
      handleError,
      beforeAvatarUpload,
      uploadComUrl,
      acceptTypes,
      uploadHeaders
    } = useUpload();

    const changeFile = async file => {
      processLoadding.value = true;
      loadProgress.value = 10;
      const res: any = await importFileForEcm(props.docid, file.raw);
      let fileObj = {
        name: file.name,
        fileName: file.name,
        uuidFile: res.docid,
        fileSize: file.size,
        fileType: "doc",
        url: res.rev
      };
      loadProgress.value = 100;
      defaultFileList.value.push(fileObj);
      let timer = setTimeout(() => {
        clearTimeout(timer);
        timer = null;
        processLoadding.value = false;
        emit("setFile", {
          file: defaultFileList.value
        });
      }, 500);
    };

    const handleRemove = file => {
      defaultFileList.value = defaultFileList.value.filter(item => {
        return item.uuidFile !== file.uuidFile;
      });
      emit("setFile", {
        file: defaultFileList.value
      });
    };

    const handlePreview = (item: any) => {
      if (item.response) {
        window.open(
          `${location.origin}${location.pathname}#/online?uuidFile=${item?.response.data.uuidFile}&fileName=${item?.response.data.fileName}`
        );
      } else {
        window.open(
          `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
        );
      }
    };

    watch(
      () => props.files,
      val => {
        if (val.length > 0) {
          defaultFileList.value = val;
        }
      },
      {
        immediate: true
      }
    );

    return {
      loadProgress,
      processLoadding,
      uploadRef,
      changeFile,
      defaultFileList,
      handlePreview,
      handleRemove,
      handleError,
      beforeAvatarUpload,
      uploadComUrl,
      acceptTypes,
      uploadHeaders
    };
  }
});
</script>
